<template>
  <div class="main">
    <el-breadcrumb separator="/" class="medicineList-breadcrumb">
      <el-breadcrumb-item
      ><span style="font-size: 16px">后台管理</span></el-breadcrumb-item
      >
      <el-breadcrumb-item
      ><span style="font-size: 18px">可视化</span></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div id="continer">
      <el-row type="flex" class="row-bg mainbox" justify="space-between">
        <!--    第一列-->
        <el-col :gutter="5" :xs="24" :sm="24" :md="6" :lg="6" class="chartCol">
          <!--柱状图 收藏-->
          <el-row :xs="24" :sm="24" :md="6" :lg="6" class="row_style">
            <el-card class="update-log panel bar">
              <div class="body">
                <div id="collectChart" class="collectChart"></div>
                <div class="panel-footer"></div>
              </div>
            </el-card>
          </el-row>

          <!--时间趋势 项目分类统计-->
          <el-row :xs="24" :sm="24" :md="6" :lg="6" class="row_style" style="margin-top: -15px">
            <el-card class="update-log panel line">
              <div class="body">
                <div id="item-sort" class="item-sort"></div>
                <div class="panel-footer"></div>
              </div>
            </el-card>
          </el-row>

          <!--饼图图-->
          <el-row :xs="24" :sm="24" :md="6" :lg="6" class="row_style" style="margin-top: -15px">
            <el-card class="update-log panel pie">
              <div class="body">
                <div id="user-num" class="user-num"></div>
                <div class="panel-footer"></div>
              </div>
            </el-card>
          </el-row>

        </el-col>
        <!--    第二列，地图-->
        <el-col :gutter="5" :xs="24" :sm="24" :md="11" :lg="11" class="chartCol">
          <!--柱状图-->
          <div style="margin-bottom: 20px">
            <el-row style="display: flex; justify-content: center;">
              <!--              <div style="color: black; margin-bottom: 5px; font-size: 25px">家政数据</div>-->
              <h2 style="color: black; margin-bottom: 5px; font-size: 25px">家政数据</h2>
            </el-row>
            <el-row style="display: flex; justify-content: space-between;">
              <div class="panel" style="max-width: 150px; margin-right: 10px;">
                <div
                    style="color: black; display: flex; justify-content: center; align-items: center; max-width: 150px; height: 30px;">
                  服务总量<span style="margin-left: 5px; color: black; ">{{itemTotal}}</span></div>
                <div class="panel-footer"></div>
              </div>
              <div class="panel" style="max-width: 150px; margin-right: 10px">
                <div
                    style="color: black; display: flex; justify-content: center; align-items: center; max-width: 150px; height: 30px;">
                  当月营业额<span style="margin-left: 5px; color: black;">{{currentMontTurnover}}</span></div>
                <div class="panel-footer"></div>
              </div>
            </el-row>
          </div>
          <el-row>
            <el-card class="update-log map">
              <div class="body">
                <div id="echart_china" ref="echart_china" class="echart_china">
                </div>
                <div class="map-footer"></div>
              </div>
            </el-card>
          </el-row>
        </el-col>
        <!--    第三列-->
        <el-col :gutter="5" :xs="24" :sm="24" :md="6" :lg="6" class="chartCol">
          <!--  柱状图    -->
          <el-row :xs="24" :sm="24" :md="6" :lg="6">
            <el-card class="update-log panel bar1">
              <div class="body">
                <div id="complain-num" class="complain-num"></div>
                <div class="panel-footer"></div>
              </div>
            </el-card>
          </el-row>
          <el-row :xs="24" :sm="24" :md="6" :lg="6" style="margin-top: -15px">
            <el-card class="update-log panel line1">
              <div class="body">
                <div id="turnover" class="turnover"></div>
                <div class="panel-footer"></div>
              </div>
            </el-card>
          </el-row>
          <el-row :gutter="5" :xs="24" :sm="24" :md="6" :lg="6" style="margin-top: -15px">
            <el-card class="update-log panel pie1">
              <div class="body">
                <div id="yuntu" class="yuntu"></div>
                <div class="panel-footer"></div>
              </div>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import Statistics from "@/components/main/Statistics";
// import TechnologyStack from "@/components/main/TechnologyStack";
import 'echarts-wordcloud';
import chinaMap from "/src/assets/china.json"

export default {
  name: 'visual',
  methods: {
    initone() {
      setTimeout(() => {
        this.initCollectChart();
      }, 100);
    },
    initCollectChart() {
      this.$axios
          .get(
              "/visual/collect",
              {
                headers: {
                  Authorization: localStorage.getItem("token"),
                },
              }
          )
          .then((res) => {
            const data = res.data.data.data;//获取接口中的数据
            const result = []
            data.forEach((item) => {
              result.push(item.item)
            })
            const yresult = []
            data.forEach((item) => {
              yresult.push(item.count)
            })
            const option = {
              title: {
                text: '家政服务收藏排行榜'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              // legend: {},
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
              },
              yAxis: {
                type: 'category',
                data: result
              },
              series: [
                {
                  name: '2011',
                  type: 'bar',
                  data: yresult,
                  itemStyle: {
                    normal: {
                      color: function (params) {
                        let colorList = [
                          '#FA897B',
                          '#FFDD94',
                          '#D0E6A5',
                          '#4675C0',
                          '#B8BFD6',
                          '#FFA876',
                          '#F0C987',
                          '#7EAFB6',
                          '#D8A7E1',
                          '#84C9A5',
                          '#F89B9D',
                          '#6D8DBE',
                          '#F3D599',
                          '#A4C4A8',
                          '#E58C9F',
                          '#F2E5B1',
                          '#A3D4C8',
                          '#D1A3D6',
                          '#E8CBB0',
                          '#C9E6D5',
                          '#B1C5E8',
                          '#F5D6A8',
                          '#C8E8D4',
                          '#A8BDE5'
                        ];
                        return colorList[params.dataIndex % colorList.length];
                      }
                    }
                  }
                }
              ]
            };
            document.getElementById('collectChart').removeAttribute('_echarts_instance_');
            var chartContainer = this.$echarts.init(document.getElementById('collectChart'));
            chartContainer.setOption(option);
          });
    },
    inittwo() {
      setTimeout(() => {
        this.initItemSortChart();
      }, 100);
    },
    initItemSortChart() {
      this.$axios
          .get(
              "/visual/itemsort",
              {
                headers: {
                  Authorization: localStorage.getItem("token"),
                },
              }
          )
          .then((res) => {
            const data = res.data.data.data;//获取接口中的数据
            const result = []
            data.forEach((item) => {
              result.push(item.item)
            })
            const yresult = []
            data.forEach((item) => {
              yresult.push(item.count)
              this.itemTotal += item.count
            })
            const option = {
              title: {
                text: '家政服务数量统计'
              },grid: {
                left: '15%', // 调整左边距，根据需要增大或减小
              },

              xAxis: {
                type: 'category',
                data: result,
              },
              yAxis: {
                type: 'value',
              },
              series: [
                {
                  data: yresult,
                  type: 'line',
                }
              ]
            };
            document.getElementById('item-sort').removeAttribute('_echarts_instance_');
            var chartContainer = this.$echarts.init(document.getElementById('item-sort'));
            chartContainer.setOption(option);
          });
    },
    initthree() {
      setTimeout(() => {
        this.initUserNumChart();
      }, 100);
    },
    initUserNumChart() {
      this.$axios
          .get(
              "/visual/user",
              {
                headers: {
                  Authorization: localStorage.getItem("token"),
                },
              }
          )
          .then((res) => {
            const data = res.data.data.data;//获取接口中的数据
            const result = []
            data.forEach((item) => {
              result.push({
                name: item.user,
                value: item.count
              })
            })
            const option = {
              title: {
                text: '用户分布统计',
                // subtext: 'Fake Data',
                // left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'right'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: result,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };

            document.getElementById('user-num').removeAttribute('_echarts_instance_');
            var chartContainer = this.$echarts.init(document.getElementById('user-num'));
            chartContainer.setOption(option);
          });

    },
    initfour() {
      setTimeout(() => {
        this.initComplainNumChart();
      }, 100);
    },
    initComplainNumChart() {
      this.$axios
          .get(
              "/visual/complain",
              {
                headers: {
                  Authorization: localStorage.getItem("token"),
                },
              }
          )
          .then((res) => {
            const data = res.data.data.data;//获取接口中的数据
            const result = []
            data.forEach((item) => {
              result.push(item.item)
            })
            const yresult = []
            data.forEach((item) => {
              yresult.push(item.count)
            })

            const option = {
              title: {
                text: '家政服务投诉统计'
              },
              xAxis: {
                type: 'category',
                data: result
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: yresult,
                  type: 'bar',

                  itemStyle: {
                    normal: {
                      color: function (params) {
                        // 自定义颜色列表
                        let colorList = [
                          '#FA897B', '#FFDD94', '#D0E6A5', '#4675C0', '#B8BFD6',
                          '#FFA876', '#F0C987', '#7EAFB6', '#D8A7E1', '#84C9A5',
                          '#F89B9D', '#6D8DBE', '#F3D599', '#A4C4A8', '#E58C9F',
                          '#F2E5B1', '#A3D4C8', '#D1A3D6', '#E8CBB0', '#C9E6D5',
                          '#B1C5E8', '#F5D6A8', '#C8E8D4', '#A8BDE5'
                        ];
                        return colorList[params.dataIndex % colorList.length]; // 根据数据索引循环选择颜色
                      }
                    }
                  },
                }
              ]
            };

            document.getElementById('complain-num').removeAttribute('_echarts_instance_');
            var chartContainer = this.$echarts.init(document.getElementById('complain-num'));
            chartContainer.setOption(option);
          });

    },
    initfive() {
      setTimeout(() => {
        this.initTurnOVerChart();
      }, 100);
    },
    initTurnOVerChart() {
      this.$axios
          .get(
              "/visual/turnover/",
              {
                headers: {
                  Authorization: localStorage.getItem("token"),
                },
              }
          )
          .then((res) => {
            const data = res.data.data.data;//获取接口中的数据
            const result = []
            data.forEach((item) => {
              result.push(item.month+"月")
            })
            const yresult = []
            data.forEach((item) => {
              yresult.push(item.count)
              this.currentMontTurnover = item.count //当月营业额
            })

            const option = {
              title: {
                text: '家政服务营业额统计',
                // subtext: '2024'
              },
              grid: {
                left: '20%', // 调整左边距，根据需要增大或减小
                // right: '10%', // 可选，调整右边距
                // bottom: '10%', // 可选，调整下边距
                // top: '15%' // 可选，调整上边距
              },
              xAxis: {
                type: 'category',
                data: result
              },
              yAxis: {
                type: 'value',
                // axisLabel: {
                //   textStyle: {
                //     fontStyle: 'italic'  // 设置斜体
                //   },
                //   rotate: 35 // 设置标签旋转角度
                // }
              },

              series: [
                {
                  data: yresult,
                  type: 'line',
                  smooth: true,
                }
              ]
            };

            document.getElementById('turnover').removeAttribute('_echarts_instance_');
            var chartContainer = this.$echarts.init(document.getElementById('turnover'));
            chartContainer.setOption(option);
            window.onresize = function () {
              chartContainer.resize();
            };
          });

    },
    initsix() {
      setTimeout(() => {
        this.initNoticeCloud();
      }, 100);
    },
    initNoticeCloud() {
      this.$axios
          .get(
              "/visual/notice",
              {
                headers: {
                  Authorization: localStorage.getItem("token"),
                },
              }
          )
          .then((res) => {
            const data = res.data.data.data;//获取接口中的数据
            const result = []
            data.forEach((item) => {
              result.push({
                name: item.notice,
                value: item.count
              })
            })

            const option = {
              title: {
                text: '家政公告图云',
                // textStyle: {
                //   color: '#fff'
                // }

              },
              grid: {
                top: 120,  // 调整词云图距离顶部的距离
                left: 10,  // 调整词云图距离左侧的距离
                right: 10,  // 调整词云图距离右侧的距离
                bottom: 10  // 调整词云图距离底部的距离
              },
              // toolbox: {
              //   show: true,
              //   feature: {
              //     mark: {show: true},
              //     saveAsImage: {show: true}
              //   }
              // },
              series: [{
                type: 'wordCloud',
                sizeRange: [10, 35],
                rotationRange: [-90, 90],
                rotationStep: 45,
                gridSize: 8,
                shape: 'circle',
                width: '80%',
                height: '80%',
                textStyle: {
                  fontFamily: 'sans-serif',
                  fontWeight: 'normal',
                  color: function () {
                    return 'rgb(' + [
                      Math.round(Math.random() * 255),
                      Math.round(Math.random() * 255),
                      Math.round(Math.random() * 255)
                    ].join(',') + ')';
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                  }
                },
                data: result
              }]
            };
            document.getElementById('yuntu').removeAttribute('_echarts_instance_');
            var chartContainer = this.$echarts.init(document.getElementById('yuntu'));
            chartContainer.setOption(option);
            window.onresize = function () {
              chartContainer.resize();
            };
          });

    },
    initseven() {
      setTimeout(() => {
        this.initMap();
      }, 100);
    },
    initMap() {
      this.$echarts.registerMap("china", chinaMap); //用导入的json文件注册一个name:china的地图组件
      this.$axios
          .get(
              "/visual/order",
              {
                headers: {
                  Authorization: localStorage.getItem("token"),
                },
              }
          )
          .then((res) => {
            const data = res.data.data.data;//获取接口中的数据
            const result = []
            data.forEach((item) => {
              result.push({
                name: item.province,
                value: item.transitcount
              })
            })

            // 3. 设置图表 option
            var option = {
              title: {
                text: "家政服务订单分布图",
                // subtext: "",
                left: "center",
                textStyle: {
                  // color: "#fff",
                  fontSize: 25,
                },
                subtextStyle: {
                  fontSize: 20,
                },
              },
              tooltip: {
                triggerOn: "mousemove",
                formatter: function (e, t, n) {
                  return e.seriesName + "<br />" + e.name + "：" + e.value;
                },
              },
              // 热力地图
              visualMap: {
                min: 0,
                max: 1000,
                left: 30,
                textStyle: {
                  color: "#000000",
                },
                pieces: [
                  {
                    gt: 500,
                    label: "> 500 项",
                    color: "#7f1100",
                  },
                  {
                    gte: 300,
                    lte: 500,
                    label: "300 - 500 项",
                    color: "#ff5428",
                  },
                  {
                    gte: 150,
                    lt: 300,
                    label: "100 - 300 项",
                    color: "#ff8c71",
                  },
                  {
                    gte: 0,
                    lt: 150,
                    label: "0 - 100 项",
                    color: "#ffd768",
                  },
                ],
                outOfRange: {
                  color: ['#cccccc'] // 未选中状态的颜色, 灰色
                },
              },

              series: [
                {
                  name: "家政订单数量",
                  data: result,
                  type: "map",
                  map: "china",
                  zoom: 1.2,
                  aspectScale: 0.75,
                  label: {
                    // 默认文本标签样式
                    normal: {
                      color: "#000",
                      show: true,
                      // formatter: function (params) {
                      //   if (topTenProvinces.indexOf(params.name) !== -1) {
                      //     return params.name;
                      //   } else {
                      //     return '';
                      //   }
                      // }
                    },
                    // 高亮文本标签样式
                    emphasis: {
                      color: "#999",
                      fontSize: 22,
                      fontWeight: "bold",
                    },

                  },
                  itemStyle: {
                    // 默认区域样式
                    normal: {
                      // 区域背景透明
                      // areaColor: "transparent",
                      borderColor: "rgba(39,211,233, 1)",
                      borderWidth: 1,
                    },
                    // 高亮区域样式
                    emphasis: {
                      // 高亮区域背景色
                      areaColor: "#7f1100",
                      label: {
                        show: true,
                      },
                    },
                  },
                },
              ],
            };
            document.getElementById('echart_china').removeAttribute('_echarts_instance_');
            // 4. 显示地图
            var chartContainer = this.$echarts.init(document.getElementById('echart_china'));
            chartContainer.setOption(option);
            window.onresize = function () {
              chartContainer.resize();
            };
          });

    },
  },
  mounted() {
    this.initone();
    this.inittwo();
    this.initthree();
    this.initfour();
    this.initfive();
    this.initsix();
    this.initseven();
  },
  data() {
    return {
      itemTotal: null, //服务总量
      currentMontTurnover: null, //当月营业额
    }
  }
};
</script>

<style>
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/*//菜单图片的css*/
.menu-img {
  width: 80%;
  height: 80%;

}

/*//最上面三个标题图片的css*/
.title-img {
  width: 18px;
  height: 18px;
}

/*收藏*/
.collectChart, .user-num, .item-sort {
  height: 230px;
}


.yuntu, .complain-num, .turnover {
  height: 230px;
}

.echart_china {
  height: 600px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  /*background-color: #06164A;*/
  background-size: cover;
  /* 行高是字体1.15倍 */
  line-height: 1.15;
}


/*header {*/
/*    position: relative;*/
/*    height: 1.25rem;*/
/*    background: url(../img/head_bg.png) no-repeat top center;*/
/*    background-size: 100% 100%;*/
/*}*/

/*header h1 {*/
/*    font-size: 0.475rem;*/
/*    color: #fff;*/
/*    text-align: center;*/
/*    line-height: 1rem;*/
/*}*/

/*header .showTime {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0.375rem;*/
/*    line-height: 0.9375rem;*/
/*    font-size: 0.25rem;*/
/*    color: rgba(255, 255, 255, 0.7);*/
/*}*/
.mainbox {
  min-width: 1024px;
  max-width: 1920px;
  padding: 0.125rem 0.125rem 0;
  display: flex;
  /*background: #06164A;*/
}

.mainbox .column {
  flex: 3;
}

.mainbox .column:nth-child(2) {
  flex: 5;
  margin: 0 0.125rem 0.1875rem;
  overflow: hidden;
}

.panel {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(255, 255, 255, 0.04);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
}

.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}

.map::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}

.map::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}

.map .map-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}

.map .map-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel h2 {
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  color: #fff;
  font-size: 0.25rem;
  font-weight: 400;
}

.panel h2 a {
  margin: 0 0.1875rem;
  color: #fff;
  text-decoration: underline;
}

.panel .chart {
  height: 3rem;
}

.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
}

.no .no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}

.no .no-hd::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  top: 0;
  left: 0;
}

.no .no-hd::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
}

.no .no-hd ul {
  display: flex;
}

.no .no-hd ul li {
  position: relative;
  flex: 1;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.875rem;
  color: #ffeb7b;
  padding: 0.05rem 0;
  font-family: electronicFont;
  font-weight: bold;
}

.no .no-hd ul li:first-child::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}

.no .no-bd ul {
  display: flex;
}

.no .no-bd ul li {
  flex: 1;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.225rem;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 0.125rem;
}

.map {
  position: relative;
  background-color: #f9fafc;
  border: 1px solid rgba(25, 186, 139, 0.17);
}

.map .chart {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
}

.map .map1,
.map .map2,
.map .map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6.475rem;
  height: 6.475rem;
  background-size: 100% 100%;
  opacity: 0.3;
}

.map .map2 {
  width: 8.0375rem;
  height: 8.0375rem;
  opacity: 0.6;
  animation: rotate 15s linear infinite;
  z-index: 2;
}

.map .map3 {
  width: 7.075rem;
  height: 7.075rem;
  animation: rotate1 10s linear infinite;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}

@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}
</style>
